import { Await, Link, useLoaderData, useNavigate } from "react-router-dom";

export default function Home() {
  const { todosPromise } = useLoaderData(); // 使用useLoaderData钩子获取加载的数据
  const navigate = useNavigate(); // 使用useNavigate钩子进行导航
  return (
    <Await resolve={todosPromise}> {/* 使用Await组件等待todosPromise解析 */}
      {(todos) => (
        <div style={{ height: 2000 }}>
          {JSON.stringify(todos)} {/* 将todos对象转换为字符串并显示 */}
          Home组件 {/* 显示组件名称 */}
          <ul>
            <li>
              <Link to="/about/a">a 团队</Link> {/* 链接到a团队的页面 */}
            </li>
            <li>
              <Link to="/about/b">b 团队</Link> {/* 链接到b团队的页面 */}
            </li>
            <li>
              <Link to="/login?returnUrl=abc">登录</Link> {/* 链接到登录页面，并附带返回URL */}
            </li>
          </ul>
          <button onClick={() => navigate("/news/company")}>
            跳转到新闻页 {/* 按钮点击后导航到新闻页面 */}
          </button>
        </div>
      )}
    </Await>
  );
}
